<template>
	<view class="padding-top-sm padding-left-sm padding-bottom-sm">
		<view class=" flex justify-between">
			<view class="w-20 relative">
				<view class="bg-10"></view>
				<view class="absolute left0 top0 w-100 h-100">
					<image class="w-100 h-100 radius" mode="aspectFill" :src="kc.cover"></image>
					<text class="bg-red text-white padding-xs round-right absolute top0 left0 text-xs">{{kczt[kc.zt]}}</text>
				</view>
				
				<view v-if="kc.jlid" style="background-color: rgba(0, 0, 0, 0.6);"
					class="flex flex-direction w-100 align-start absolute left0 bottom0 padding-xxs">
					<view class="flex justify-start align-center">
						<image style="width: 40rpx; height: 40rpx;" class="round" mode="aspectFill" :src="kc.jcover"></image>
						<text class="text-pink">{{kc.jlname}}</text>
					</view>
				</view>
				
				<view v-if="kc.mdjlid" style="background-color: rgba(0, 0, 0, 0.6);"
					class="flex flex-direction w-100 align-start absolute left0 bottom0 padding-xxs">
					<view class="flex justify-start align-center">
						<image style="width: 40rpx; height: 40rpx;" class="round" mode="aspectFill" :src="kc.mdjlcover"></image>
						<text class="text-pink">{{kc.mdjlname}}</text>
					</view>
				</view>
				
			</view>
			<view class="w-80 padding-left-sm flex flex-direction justify-between">
				<view class="flex justify-between align-baseline">
					<text>
						<text class="text-sm bg-g-main radius text-main padding-xs">{{kc.lxname}}</text>
						<text class="text-cut text-lg text-bold padding-left-xs">{{kc.kcname}}</text>
					</text>
					<view class="flex justify-start align-baseline">
						<text class="text-red padding-right-sm">￥<text class="text-xl text-bold">{{kc.price / 100}}</text></text>
					</view>
				</view>
				<view class="text-lg text-gray flex justify-between align-center padding-top-xs">
					<text>
						<text class="iconfont icon-yuyuejilu"></text>
						<text class="text-sm">{{kc.st}} ~ {{kc.et}}</text>
					</text>
					
					
				</view>
				
				<view class="text-gray text-sm flex justify-between align-baseline">
					<text class="text-sm padding-right-sm">
						<text v-if="kc.zdrs == 1" class="">私教课</text>
						<text v-else-if="kc.zdrs <= 6" class="">小班课</text>
						<text v-else class="">大班课</text>
					</text>
					<text>
						<text class="">
							<text @tap="toDetail(kc.kcid)" class="text-orange margin-right-xs">详细</text>
						</text>
						<text class="bg-orange padding-xs round-left text-sm">{{kc.cs}}个课时</text>
					</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			kc: {
				type: Object,
				default: {}
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			path: {
				type: String,
				default: ""
			}
		},
		data: function() {
			return {
				kczt: {}
			};
		},
		created: function(){
			this.constant.get("kczt").then(data => {
				this.kczt = data.kczt;
			});
		},
		methods: {
			toDetail: function(kcid) {
				uni.navigateTo({
					url: this.path + '/kc/detail?kcid='+kcid
				});
			},
		}
	}
</script>

<style scoped>
	.kctitle {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: start;
		min-height: 100rpx;
		justify-content: space-between;
		flex-direction: column;
	}

</style>